<template>
  <BasicModal v-bind="$attrs" destroyOnClose title="新会员导入" width="40%" :footer="null" @register="registerModal" :destroyOnClose="true">
    <p style="margin-bottom: 50px">
      <a-button @click="goDownloadTemplate()">下载导入模板</a-button>
    </p>
    <a-upload style="display: flex; margin: 5px" name="file" :multiple="false" :maxCount="1" :data="extraData" :action="apiUrl + Api.importNewUserExcel" method="POST" :headers="headers" @change="handleChange" accept=".xls,.xlsx">
      <a-button type="primary">
        <Icon icon="ant-design:plus-outlined" />
        选择文件
      </a-button>
    </a-upload>
  </BasicModal>
</template>
<script lang="ts" setup>
import { BasicModal, useModalInner } from '@apps/antd-admin/src/components/modal';
import { reactive, ref } from 'vue';
import { Api } from '../data/api';
import { Icon } from '@components/common';
import { context } from '@pkg/request/bridge';
import { getGlobalConfig } from '@apps/antd-admin/src/internal';
import { useMessage } from '@apps/antd-admin/src/hooks/web/useMessage';

const { createMessage, createErrorModal } = useMessage();

const { apiUrl } = getGlobalConfig();
const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const extraData = ref<object>({});
const token = context.getTokenFunction?.();
//token
const headers = ref<object>({
  Authorization: token,
});
const [registerModal, { setModalProps, closeModal }] = useModalInner(async data => {});

/**
 * 下载导入模板
 */
function goDownloadTemplate() {
  let a = document.createElement('a'); //创建一个<a></a>标签
  a.href = '/static/新会员导入模板.xls'; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
  a.download = '新会员导入模板.xls'; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
  a.style.display = 'none'; // 障眼法藏起来a标签
  document.body.appendChild(a); // 将a标签追加到文档对象中
  a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
  a.remove(); // 一次性的，用完就删除a标签
}

function handleSelectChange({ file, fileList, event }) {}

/**
 * 文件上传结果回调
 */
function handleChange({ file, fileList, event }) {
  console.info('上传文件file', file);
  console.info('event', event);
  console.info('fileList', fileList);
  if (file.status === 'error') {
    createMessage.error(`${file.name} 上传失败.`);
  }
  //上传完成
  if (file.status != 'uploading') {
    fileList.forEach(file => {
      if (file.status === 'done') {
        let response = file.response;
        createMessage.info(response.data);
        closeModal();
      }
    });
  }
}
</script>
